﻿@model WebExtras.DemoApp.Models.Mvc.CoreHtmlViewModel
@{
  ViewBag.Title = "Mvc Bootstrap 3 Html Helper Extensions";
}

@if (Model.ShowMessage)
{
  @Html.GetLastActionMessage()
}

<h3 class="keep-center">Mvc Bootstrap 3 Html Helper Extensions</h3>

<div class="row">
  <div class="col-md-6">
    <div class="row">
      <div class="col-md-3">
        <strong>Assembly</strong>
      </div>
      <div class="col-md-4">
        WebExtras.Mvc.dll
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <strong>Namespace</strong>
      </div>
      <div class="col-md-4">
        WebExtras.Mvc.Bootstrap
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="col-md-3">
      <strong>Dependancies</strong>
    </div>
    <div class="col-md-7">
      <ul class="dependancies">
        <li>Bootstrap 3.x</li>
        <li>Font Awesome 4.0 and above</li>
        <li>webextras.bootstrap3.css</li>
      </ul>
    </div>
  </div>
</div>

@{
  Alert[] alerts = Html.GetUserAlerts();
  if (alerts.Length > 0)
  {
  
  <div class="row">
    <div class="col-md-12">
      @foreach (Alert alert in alerts)
      {
        @alert
      }
    </div>
  </div>
  
  }
}

<div class="well">
  <h4>Icon</h4>
  <p>
    Markup
  </p>
  <pre><code>
@@Html.Icon(EBootstrapIcon.Ok)
@@Html.Icon(EFontAwesomeIcon.Ok)
@@Html.Icon(EFontAwesomeIcon.Ok, EFontAwesomeIconSize.Large)
  </code></pre>
  <p>
    Output
  </p>
  <div class="content">
    <div class="row">
      <div class="col-md-4">Default Bootstrap Icons</div>
      <div class="col-md-4">Font Awesome Icons</div>
      <div class="col-md-4">Sized Font Awesome Icons</div>
    </div>
    <div class="row">
      <div class="col-md-4">
        @Html.Icon(EBootstrapIcon.Thumbs_Up) @Html.Icon(EBootstrapIcon.Arrow_Down) @Html.Icon(EBootstrapIcon.Backward)
        @Html.Icon(EBootstrapIcon.Ban_Circle) @Html.Icon(EBootstrapIcon.Tint)
      </div>
      <div class="col-md-4">
        @Html.Icon(EFontAwesomeIcon.Thumbs_Up) @Html.Icon(EFontAwesomeIcon.Arrow_Down) @Html.Icon(EFontAwesomeIcon.Backward)
        @Html.Icon(EFontAwesomeIcon.Ban) @Html.Icon(EFontAwesomeIcon.Tint)
      </div>
      <div class="col-md-4">
        @Html.Icon(EFontAwesomeIcon.Thumbs_Up, EFontAwesomeIconSize.Normal) @Html.Icon(EFontAwesomeIcon.Arrow_Down, EFontAwesomeIconSize.Large) @Html.Icon(EFontAwesomeIcon.Backward, EFontAwesomeIconSize.TwoX)
        @Html.Icon(EFontAwesomeIcon.Ban, EFontAwesomeIconSize.ThreeX) @Html.Icon(EFontAwesomeIcon.Tint, EFontAwesomeIconSize.FourX)
      </div>
    </div>
  </div>
</div>

<div class="well">
  <h4>Adding Icons to existing elements</h4>
  <p>
    Markup
  </p>
  <pre><code>
@@Html.Hyperlink("Take me to google", "http://www.google.com").AddIcon(EBootstrapIcon.Ok)
  </code></pre>
  <p>
    Output
  </p>
  <div class="content">
    @Html.Hyperlink("Take me to google", "http://www.google.com").AddIcon(EBootstrapIcon.Ok)
  </div>
  <p>
    All available extensions
  </p>
  <pre><code>
.AddIcon(bootstrap-Icon)                
.AddIcon(fontawesome-Icon)
.AddIcon(fontawesome-Icon, fontawesome-Icon-size)
  </code></pre>
  @Html.Alert(EMessage.Warning, "Note that the 'icon' can be a default Bootstrap icon or a Font Awesome icon", string.Empty, EFontAwesomeIcon.Flag)
  <p>
    As of Bootstrap v3.0 all icons/glyphicons are font based. Therefore, you can control the coloring of the
    icons using basic CSS styling.
    <br />
    As such if you try to use the <span class="highlight">AddWhiteIcon()</span> extension you will get an
    <span class="highlight">InvalidOperationException</span>.
  </p>
</div>

<div class="well">
  <h4>Button styled hyperlinks</h4>
  <p>
    Markup
  </p>
  <pre><code>
@@Html.Hyperlink("Take me to google", "http://www.google.com")
  .AddIcon(EBootstrapIcon.Ok)
  .AsButton(EBootstrapButton.Info) 
  </code></pre>
  <p>
    Output
  </p>
  <div class="content">
    @Html.Hyperlink("Take me to google", "http://www.google.com").AddIcon(EBootstrapIcon.Ok).AsButton(EBootstrapButton.Info)
  </div>
  <p>
    All available extensions
  </p>
  <pre><code>
.AsButton(type) 
  </code></pre>
  @Html.Alert(EMessage.Warning, "Note that this extension can only be used for hyperlinks and button elements", string.Empty, EFontAwesomeIcon.Flag)
</div>

<div class="well">
  <h4>Navbar</h4>
  <p>Markup</p>
  <pre><code>
@@{
  <span class="comment">// You can use Hyperlink elements or a HtmlList element to render a navbar</span>
  Hyperlink link1 = new Hyperlink("Link 1", "#");
  Hyperlink link2 = new Hyperlink("Link 2", "#");
  Hyperlink link3 = new Hyperlink("Link 3", "#");
  Hyperlink link4 = new Hyperlink("Brand", "#", new { @@class = "brand" });
        
  HtmlListItem item3 = new HtmlListItem(string.Empty);
  item3.Append(link3);        

  HtmlList list = new HtmlList(EList.Unordered, new HtmlListItem[] { item3 });    
}      

@@Html.Navbar(EBootstrapNavbar.Normal, list)

<span class="comment">// Use appropriate navbar type to get all bootstrap effects</span>
@@Html.Navbar(EBootstrapNavbar.Normal, link1, link2, link3, link4)<span class="highlight">.AsInverse()</span>  <span class="comment">// Creates an inverse styled navbar</span>
  </code></pre>
  <p>
    Output
  </p>
  <div class="content">
    <div class="container">
      @{
        Hyperlink link1 = new Hyperlink("Link 1", "#");
        Hyperlink link2 = new Hyperlink("Link 2", "#");
        Hyperlink link3 = new Hyperlink("Link 3", "#");
        Hyperlink link4 = new Hyperlink("Brand", "#", new { @class = "brand" });

        HtmlListItem item3 = new HtmlListItem(string.Empty);
        item3.Append(link3);

        HtmlList list = new HtmlList(EList.Unordered, new HtmlListItem[] { item3 });    
      }

      @Html.Navbar(EBootstrapNavbar.Normal, list)

      @Html.Navbar(EBootstrapNavbar.Normal, link1, link2, link3, link4).AsInverse()
    </div>
  </div>
</div>

<div class="well">
  <h4>Progress Bars</h4>
  <p>Markup</p>
  <pre><code>
@@Html.ProgressBar(EBootstrapProgressBar.Default, 10)
@@Html.ProgressBar(EBootstrapProgressBar.Success, 25)
@@Html.ProgressBar(EBootstrapProgressBar.Warning, 50)<span class="highlight">.AsStriped()</span>
@@Html.ProgressBar(EBootstrapProgressBar.Danger, 75)<span class="highlight">.AsAnimated()</span>
  </code></pre>
  <p>Output</p>
  <div class="content">
    @Html.ProgressBar(EBootstrapProgressBar.Default, 10)
    @Html.ProgressBar(EBootstrapProgressBar.Success, 25)
    @Html.ProgressBar(EBootstrapProgressBar.Warning, 50).AsStriped()
    @Html.ProgressBar(EBootstrapProgressBar.Danger, 75).AsAnimated()
  </div>
  <p>Striped and Animated progress bar CSS effects are not supported in Internet Explorer 9 and below and on Opera 12</p>
</div>

<div class="well">
  <h4>Tooltips</h4>
  <p>Markup</p>
  <pre><code>
@@Html.TooltipFor(f => f.SomeProperty, "This is a tooltip")
@@Html.TooltipFor(f => f.SomeProperty2)
  </code></pre>
  <p>Output</p>
  <div class="content">
    <div class="row">
      <div class="col-md-3">First call result @Html.Icon(EFontAwesomeIcon.Angle_Right) @Html.TooltipFor(f => f.SomeProperty, "This is a tooltip")</div>
      <div class="col-md-6">Second call result @Html.Icon(EFontAwesomeIcon.Angle_Right) @Html.TooltipFor(f => f.SomeProperty2)</div>
    </div>
  </div>
  <p>All available extensions</p>
  <pre><code>
<span class="comment">// Tooltip text retrieved from the <span class="highlight">System.ComponentModel.DescriptionAttribute</span> added to the view model property</span>
@@Html.TooltipFor(propertySelector)
@@Html.TooltipFor(propertySelector, placement, trigger)

<span class="comment">// Tooltip text retrieved from the function parameter passed in</span>
@@Html.TooltipFor(propertySelector, tooltipText)
@@Html.TooltipFor(propertySelector, tooltipText, placement, trigger)
  </code></pre>
</div>

<div class="well">
  <h4>Alerts</h4>
  <p>You can create alert messages using WebExtras extension method</p>
  <p>Usage</p>
  <pre><code>
  @@Html.Alert(EMessage.Success, "Hooray...I am a resounding success")
  @@Html.Alert(EMessage.Warning, "Oops...something went wrong. But no worries, I can still continue", "Note:")
  @@Html.Alert(EMessage.Error, "No dice...something is seriously wrong. I quit", "Error:", EBootstrapIcon.Exclamation_Sign)
  @@Html.Alert(EMessage.Information, "Just so you know, I am gonna try it again", "Note:", EFontAwesomeIcon.Flag)
  </code></pre>
  <p>Output</p>
  <div class="content">
    @Html.Alert(EMessage.Success, "Hooray...I am a resounding success")
    @Html.Alert(EMessage.Warning, "Oops...something went wrong. But no worries, I can still continue", "Note:")
    @Html.Alert(EMessage.Error, "No dice...something is seriously wrong. I quit", "Error:", EBootstrapIcon.Exclamation_Sign)
    @Html.Alert(EMessage.Information, "Just so you know, I am gonna try it again", "Note:", EFontAwesomeIcon.Flag)
  </div>
</div>

<div class="well">
  <h4>Action messages</h4>
  <p>
    WebExtras provides a way to add action messages to denote status of action to notify a user. For e.g. you may want to add a message to the user when he is moved to a different
    page on a form submit or on a particular action
  </p>
  <p>Usage</p>
  <pre><code>
<span class="comment">// In the controller</span>
using WebExtras.MVC.Bootstrap.Core

public class HomeController : ControllerBase
{
  public ActionResult SomeAction()
  {
    SomeModel model = new SomeModel();
    return <span class="highlight">this.</span>View("myview", model, "Your action was successful");
  }

  public ActionResult SomeOtherAction()
  {
    SomeModel model = new SomeModel();
    return <span class="highlight">this.</span>RedirectToAction(myActionResult, "Your action failed", EActionMessage.Error);
  }
}

<span class="comment">// In the view</span>
@@Html.GetLastActionMessage()
  </code></pre>
  <p>Output</p>
  <div class="content">
    <span class="comment">// Click the link below to see an action message demo.
      <br />
    </span>
    <span class="comment">// Action messages by default appear on the top right corner of the screen.
      <br />
    </span>
    <span class="comment">// It's position can be controlled via CSS though. See the accompanying webextras.css file.
      <br />
    </span>
    <br />
    @Html.Hyperlink("Action Successful Message Demo", MVC.Bootstrap3.Mvc.ActionMessageDemo(true))
    &nbsp;&nbsp;&nbsp;&nbsp;
    @Html.Hyperlink("Action Error Message Demo", MVC.Bootstrap3.Mvc.ActionMessageDemo(false))
  </div>
</div>

<div class="well">
  <h4>User Alerts</h4>
  <p>
    While there can only be one action message per controller action, WebExtras also allows you to add multiple
    user alerts which can then be retrieved and displayed from the view.
  </p>
  <p>Usage</p>
  <pre><code>
  <span class="comment">// in your controller</span>
  public ActionResult SomeAction()
  {
    ....
    Alert alert = new Alert(...);
    ....
    this.SaveUserAlert(alert);
    ....
    return View()
  }
    
  <span class="comment">// and then in your view</span>
  @@{
    Alert[] alerts = Html.GetUserAlerts();
  
    foreach(Alert alert in alerts)
    {
      @@alert
    }
  }
  </code></pre>
  <p>Output</p>
  <div class="content">
    <span class="comment">// Click the link below to see an user alerts demo.
      <br />
    </span>
    <span class="comment">// User alerts will be shown at the top of the page.
      <br />
    </span>
    <br />
    @Html.Hyperlink("User Alerts Demo", MVC.Bootstrap3.Mvc.UserAlertsDemo())
  </div>
</div>
